<template>
  <div>
    <el-dialog
      title="考试统计分析"
      :visible.sync="isOpen"
      width="50%"
      append-to-body
      :destroy-on-close="true"
      @open="onOpen"
    >
      <div class="expt_div">
        <el-button class="btn" type="primary" @click="exprotImg">导出为图片</el-button>
      </div>
      <div id="chart">
        <div ref="line" style="width: 100%;height:350px"></div>
        <div ref="sector" style="width: 100%;height:350px"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import h2c from "html2canvas";
export default {
  name: "PaperRecord",
  props: {
    // 是否展开
    visible: {
      type: Boolean,
      default: false
    },
    // 数据
    dataInfo: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      // 折线统计图
      lineLabels: [],
      lineValues: [],
      lineOption: {
        title: {
          text: "各分数段用户人数",
          left: "center"
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            // x轴旋转角度（逆时针）
            rotate: 35
          },
          axisTick: {
            alignWithLabel: false
          }
        },
        grid: {
          left: 20,
          right: 20,
          top: 50,
          bottom: 65
        },
        yAxis: {
          type: "value",
          scale: true
        },
        tooltip: {
          trigger: "axis"
        },
        series: {
          data: [],
          type: "line",
          smooth: true,
          color: "#67C23A",
          name: "",
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" }
            ]
          }
        }
      },
      lineChart: null,
      // 扇形统计图
      sector: [],
      sectorOption: {
        title: {
          text: "合格/不合格人员占比",
          left: "center"
        },
        color: ["#ee6666", "#91cc75"],
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: {
          name: "人数",
          type: "pie",
          radius: "70%",
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      },
      sectorChart: null
    };
  },
  methods: {
    initChart() {
      this.lineChart = echarts.init(this.$refs.line);
      this.sectorChart = echarts.init(this.$refs.sector);
    },
    onOpen() {
      // el-dialog中的元素无法在mounted中挂载
      this.$nextTick(() => {
        // 挂载
        this.initChart();
        // 设置属性
        this.setOptions();
      });
    },
    setOptions() {
      let sector = new Array();
      sector[0] = {
        name: "未合格",
        value: this.dataInfo.sector.fail
      };
      sector[1] = {
        name: "合格",
        value: this.dataInfo.sector.adopt
      };
      this.lineOption.xAxis.data = this.dataInfo.line.label;
      this.lineOption.series.data = this.dataInfo.line.value;
      this.sectorOption.series.data = sector;
      this.lineChart.setOption(this.lineOption);
      this.sectorChart.setOption(this.sectorOption);
    },
    exprotImg() {
      h2c(document.getElementById("chart")).then(canvas => {
        let img = canvas
          .toDataURL("image/png")
          .replace("image/png", "image/octet-stream");
        // 创建a标签，实现下载
        let creatIMg = document.createElement("a");
        creatIMg.download = "考试统计图.png"; // 设置下载的文件名，
        creatIMg.href = img; // 下载url
        document.body.appendChild(creatIMg);
        creatIMg.click();
        creatIMg.remove(); // 下载之后把创建的元素删除
      });
    }
  },
  computed: {
    isOpen: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  }
};
</script>

<style scoped>
.expt_div {
  height: 40px;
}
.expt_div .btn {
  float: right;
  margin-bottom: 10px;
}
</style>